<template>
  <div class="public-views">
    <div class="public-inner">
      <pubilc-sub-nav :navList="billSubNav"></pubilc-sub-nav>
      <div class="bill-left">
        <ul class="bill-nav">
          <li v-for="item in billNav" :class="{'bill-nav-activate': item.activate}" @click="navTab(item)">{{item.text}}</li>
        </ul>
        <div class="bill-content" v-if="isViews">
          <div class="content-top">
            <span>金额</span>
            <span>用途</span>
            <span @click="isMiLiTime = !isMiLiTime">
              时间
              <ul class="month-list" v-if="isMiLiTime">
                <li v-for="(item, index) in monthList" :class="{'activate': item.activate}">{{item.month}}<i></i></li>
              </ul>
            </span>
            <span>支付方式</span>
            <span>订单编号</span>
          </div>
          <ul class="content-list">
            <li>
              <span>1000元</span>
              <span>米粒充值:1000元</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>1000元</span>
              <span>米粒充值:1000元</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>1000元</span>
              <span>米粒充值:1000元</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>1000元</span>
              <span>米粒充值:1000元</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>1000元</span>
              <span>米粒充值:1000元</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>1000元</span>
              <span>米粒充值:1000元</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>1000元</span>
              <span>米粒充值:1000元</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>1000元</span>
              <span>米粒充值:1000元</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>1000元</span>
              <span>米粒充值:1000元</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>1000元</span>
              <span>米粒充值:1000元</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
          </ul>
        </div>
        <div class="bill-content" v-if="!isViews">
          <div class="content-top-game">
            <span>金额</span>
            <span>消费项目</span>
            <span>游戏</span>
            <span @click="isGameTime = !isGameTime">
              时间
              <ul class="month-list" v-if="isGameTime">
                <li v-for="(item, index) in monthList" :class="{'activate': item.activate}">{{item.month}}<i></i></li>
              </ul>
            </span>
            <span>支付方式</span>
            <span>订单编号</span>
          </div>
          <ul class="content-list-game">
            <li>
              <span>60元</span>
              <span>钻石*8000</span>
              <span>十万个大魔王</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>60元</span>
              <span>钻石*8000</span>
              <span>十万个大魔王</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>60元</span>
              <span>钻石*8000</span>
              <span>十万个大魔王</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>60元</span>
              <span>钻石*8000</span>
              <span>十万个大魔王</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>60元</span>
              <span>钻石*8000</span>
              <span>十万个大魔王</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>60元</span>
              <span>钻石*8000</span>
              <span>十万个大魔王</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>60元</span>
              <span>钻石*8000</span>
              <span>十万个大魔王</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>60元</span>
              <span>钻石*8000</span>
              <span>十万个大魔王</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>60元</span>
              <span>钻石*8000</span>
              <span>十万个大魔王</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
            <li>
              <span>60元</span>
              <span>钻石*8000</span>
              <span>十万个大魔王</span>
              <span>2017-11-28 23:59</span>
              <span>支付宝</span>
              <span>435801247381003</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="bill-right">
        <right-sidebar-play title="推荐游戏" :list="billGame1"></right-sidebar-play>
        <right-sidebar-play title="热门游戏" :list="billGame2"></right-sidebar-play>
      </div>
    </div>
  </div>
</template>

<script>
const PubilcSubNav = import('@/components/PublicSubNav.vue')
// const rightSidebarPlay = import('@/components/rightSidebarPlay.vue')
export default {
  title() {
    return '米娱游戏_账单详情'
  },
  components: {
    PubilcSubNav,
    // rightSidebarPlay
  },
  asyncData({ store, route }) {
    const s = parseInt(Math.random() * 200 + 1)
    const e = parseInt(Math.random() * 15 + 10)
    return store.dispatch('fetchGiftGame', { start: s, end: e, cache: true })
  },
  computed: {
    billGame1: function() {
      const arr = []
      this.$store.state.GiftGame.forEach(function(e, i) {
        if (i > this.$store.state.GiftGame.length / 2) arr.push(e)
      }, this)
      return arr
    },
    billGame2: function() {
      const arr = []
      this.$store.state.GiftGame.forEach(function(e, i) {
        if (i < this.$store.state.GiftGame.length / 2) arr.push(e)
      }, this)
      return arr
    },
    monthList: function() {
      return this.monthFun()
    }
  },
  data() {
    return {
      billNav: [
        { text: '米粒充值', activate: true, view: 1 },
        { text: '游戏消费', activate: false, view: 0 }
      ],
      billSubNav: [
        { text: '充值', href: '/pay', activate: false },
        { text: '账单详情', href: '/details/bill', activate: true }
      ],
      isViews: 1,   // 展示视图
      isMiLiTime: false,  // 选择米粒充值时间
      isGameTime: false  // 选择游戏充值时间
    }
  },
  methods: {
    // 切换导航
    navTab(item) {
      this.billNav.map(v => v.activate = false)
      item.activate = true
      this.isViews = item.view
    },
    monthFun() {
      const data = new Date()
      let year = data.getFullYear()
      let month = data.getMonth() + 1
      const arr = []
      for (let i = 0; i < 6; i++) {
        month = month - 1
        if (month <= 0) {
          year = year - 1
          month = month + 12
        }
        if (month < 10) {
          month = '0' + month
        }
        arr.push({ month: year + '-' + month, activate: false })
      }
      arr.push({ month: '不限', activate: true })
      return arr
    }
  }
}
</script>

<style lang="less" scoped>
.bill-left {
  width: 900px;
  float: left;
  margin-bottom: 40px;
  .bill-nav {
    overflow: hidden;
    li {
      line-height: 70px;
      width: 225px;
      text-align: center;
      float: left;
      box-shadow: 0 5px 5px 0 #eee inset;
      font-weight: 600;
    }
    .bill-nav-activate {
      background: #fff;
      box-shadow: none;
      color: #ffa93a;
    }
  }
  .bill-content {
    background: #fff;
    margin-top: -1px;
    height: 1000px;
    box-shadow: 1px 1px 5px 1px #eee;
    padding: 20px;
    .content-top {
      font-size: 0;
      line-height: 40px;
      height: 40px;
      span {
        font-size: 14px;
        color: #b09100;
        background: #fee051;
        display: inline-block;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        padding-left: 16px;
        border-right: 1px solid #fff;
        position: relative;
        &:nth-child(1) {
          width: 133px;
        }
        &:nth-child(2) {
          width: 170px;
        }
        &:nth-child(3) {
          width: 214px;
          cursor: pointer;
          &:after {
            content: '';
            width: 0;
            height: 0;
            border-right: 6px solid transparent;
            border-top: 8px solid #fff;
            border-left: 6px solid transparent;
            background-color: transparent;
            position: absolute;
            right: 10px;
            top: 17px;
            -webkit-transition: none;
            transition: none;
          }
        }
        &:nth-child(4) {
          width: 128px;
          cursor: pointer;
          &:after {
            content: '';
            width: 0;
            height: 0;
            border-right: 6px solid transparent;
            border-top: 8px solid #fff;
            border-left: 6px solid transparent;
            background-color: transparent;
            position: absolute;
            right: 10px;
            top: 17px;
            -webkit-transition: none;
            transition: none;
          }
        }
        &:nth-child(5) {
          width: 215px;
          border-right: 0;
        }
      }
    }
    .content-list {
      li {
        height: 58px;
        line-height: 58px;
        font-size: 0;
        span {
          font-size: 14px;
          color: #333;
          display: inline-block;
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          -o-box-sizing: border-box;
          padding-left: 16px;
          border-right: 1px solid #eee;
          position: relative;
          font-weight: 600;
          &:nth-child(1) {
            width: 133px;
          }
          &:nth-child(2) {
            width: 170px;
          }
          &:nth-child(3) {
            width: 214px;
          }
          &:nth-child(4) {
            width: 128px;
          }
          &:nth-child(5) {
            width: 215px;
            border-right: 0;
          }
        }
        &:nth-child(2n) {
          background: #eee;
          span {
            border-right: 1px solid #fff;
          }
        }
      }
    }
    .content-top-game {
      font-size: 0;
      line-height: 40px;
      height: 40px;
      span {
        font-size: 14px;
        color: #b09100;
        background: #fee051;
        display: inline-block;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        padding-left: 16px;
        border-right: 1px solid #fff;
        position: relative;
        &:nth-child(1) {
          width: 90px;
        }
        &:nth-child(2) {
          width: 195px;
        }
        &:nth-child(3) {
          width: 140px;
          cursor: pointer;
          &:after {
            content: '';
            width: 0;
            height: 0;
            border-right: 6px solid transparent;
            border-top: 8px solid #fff;
            border-left: 6px solid transparent;
            background-color: transparent;
            position: absolute;
            right: 10px;
            top: 17px;
            -webkit-transition: none;
            transition: none;
          }
        }
        &:nth-child(4) {
          width: 155px;
          cursor: pointer;
          &:after {
            content: '';
            width: 0;
            height: 0;
            border-right: 6px solid transparent;
            border-top: 8px solid #fff;
            border-left: 6px solid transparent;
            background-color: transparent;
            position: absolute;
            right: 10px;
            top: 17px;
            -webkit-transition: none;
            transition: none;
          }
        }
        &:nth-child(5) {
          width: 110px;
          cursor: pointer;
          &:after {
            content: '';
            width: 0;
            height: 0;
            border-right: 6px solid transparent;
            border-top: 8px solid #fff;
            border-left: 6px solid transparent;
            background-color: transparent;
            position: absolute;
            right: 10px;
            top: 17px;
            -webkit-transition: none;
            transition: none;
          }
        }
        &:nth-child(6) {
          width: 170px;
          border-right: 0;
        }
      }
    }
    .content-list-game {
      li {
        height: 58px;
        line-height: 58px;
        font-size: 0;
        span {
          font-size: 14px;
          color: #333;
          display: inline-block;
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          -o-box-sizing: border-box;
          padding-left: 16px;
          border-right: 1px solid #eee;
          position: relative;
          font-weight: 600;
          &:nth-child(1) {
            width: 90px;
          }
          &:nth-child(2) {
            width: 195px;
          }
          &:nth-child(3) {
            width: 140px;
          }
          &:nth-child(4) {
            width: 155px;
          }
          &:nth-child(5) {
            width: 110px;
          }
          &:nth-child(6) {
            width: 170px;
            border-right: 0;
          }
        }
        &:nth-child(2n) {
          background: #eee;
          span {
            border-right: 1px solid #fff;
          }
        }
      }
    }
  }
  .month-list {
    width: 100%;
    position: absolute;
    left: -1px;
    top: 52px;
    background: #fff;
    border: 1px solid #fee051;
    z-index: 9;
    &:after {
      content: '';
      width: 0;
      height: 0;
      border-right: 8px solid transparent;
      border-bottom: 10px solid #fee051;
      border-left: 8px solid transparent;
      background-color: transparent;
      position: absolute;
      right: 8px;
      top: -10px;
      -webkit-transition: none;
      transition: none;
    }
    &:before {
      content: '';
      width: 0;
      height: 0;
      border-right: 5px solid transparent;
      border-bottom: 8px solid #fff;
      border-left: 5px solid transparent;
      background-color: transparent;
      position: absolute;
      right: 11px;
      top: -8px;
      -webkit-transition: none;
      transition: none;
      z-index: 11;
    }
    li {
      line-height: 60px;
      font-size: 14px;
      text-align: center;
      color: #999;
      &:hover {
        color: #76dcff;
      }
    }
    .activate {
      color: #b09100;
      background: #fee051;
    }
  }
}

.bill-right {
  width: 260px;
  float: right;
}
</style>

